<!--列表页面上面有新增按钮，打开编辑界面-->
<template>
    <div class='tableEdit' :style="heights">
        <div style='margin-bottom:0px;text-align:left'>
            <input-button-edit :label="item.label" @goSearch="goSearch" @openWinEdit="openWinEdit"  :id="item.id"  :data="data" :extype="item.extype" :exkey="item.exkey"   v-for="(item,index) in buttons" :key="index" :appid="appid"></input-button-edit>
        </div>
        <el-table
            :data="data[dataField]"
            class='tablesss'
            height="100%"
            highlight-current-row
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            border
            style="width: 100%;">
             <el-table-column
                type="selection"
                width="55">
                </el-table-column>
            <el-table-column
               v-for="(item,index) in listNew" :key="index"
                :label="item.label"
                :prop="item.id"
               :style='item.width' >
                 <!--template slot-scope="scope">
                    <input-noborder :id="item.id" :dataField="dataField" ref="inputs" :data="data" :exdata="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"  v-if="item.type=='text'"></input-noborder>
                    <input-select :id="item.id"  :dataField="dataField" styles="width:100%" :options="item.dataSource" :index="scope.$index"   :data="data"  @input="tableChangeData" :isreadonly="item.isReadOnly" v-if="item.type=='select'" ></input-select>
                    <input-date :id="item.id"   :dataField="dataField"  styles="width:100%"  :index="scope.$index"  :data="data"  @input="tableChangeData" v-if="item.type=='date'"></input-date>

                </template-->
            </el-table-column>
           
        </el-table>
        <!--table cellspacing=0 cellpadding=0>
            <colgroup>
                <col v-for="(item,index) in listNew" :key="index" :style='item.width'/>
                <col style='width:18px'/>
            </colgroup>
            <tr>
                <th v-for="(item,index) in listNew" :key="index">
                    {{item.label}}
                </th>
                <th>&nbsp;</th>
            </tr>
            <tr v-for="(item,index) in data[dataField]" :key="index">
                <td v-for="(field,index2) in listNew" :key="index2">
                    <input-noborder :id="field.id" :dataField="dataField" ref="inputs" :data="data" :exdata="index" :extype="field.extype" :exkey="field.exkey" @input="tableChangeData"  :isreadonly="field.isReadOnly"  v-if="field.type=='text'"></input-noborder>
                    <input-select :id="field.id"  :dataField="dataField" styles="width:100%" :options="field.dataSource" :index="index"   :data="data"  @input="tableChangeData" :isreadonly="field.isReadOnly" v-if="field.type=='select'" ></input-select>
                    <input-date :id="field.id"   :dataField="dataField"  styles="width:100%"  :index="index"  :data="data"  @input="tableChangeData" v-if="field.type=='date'"></input-date>

                </td>
                <td style='text-align:center;color:red'><i class='fa fa-times' style='cursor:pointer' @click="removeItem(index)"></i></td>
            </tr>
            
        </table-->
    </div>
    
</template>
<script>

import inputNoborder  from '../input/input-noborder'
import inputSelect from '../input/input-select'
import inputDate from '../input/input-date'
import inputButtonEdit from '../input/input-button-edit'
export default {
    props:['dataField','listField','data','heights','isreadonly','appid'],
    name: "table-edit-button",
    components: {
       inputNoborder,
       inputSelect,
       inputDate,
       inputButtonEdit
    },
    data(){
        return{
            buttons:[],
            listNew:[],
            curRow:null,
            rows:null
        }
    },
    created(){
        this.buttons=[];
        this.listNew=[];
        for(let i=0;i<this.listField.length;i++){
            if(this.listField[i].type=="inputEditBtn"){
                this.buttons.push(this.listField[i])
            }else{
                this.listNew.push(this.listField[i])
            }
        }
    }, 
    methods:{
        goSearch(){
            this.$emit("goSearch","");
        },
        openWinEdit(data){
            this.$emit("openWinEdit",data);
        },
        getSelectRow(){
            return this.curRow;
        },
        getSelectRows(){
            return this.rows;
        },
        rowClick(row, column, event){
            this.curRow=row;
        },
        handleSelectionChange(val) {
            this.rows = val;
            
           // this.$emit("rowMultiClick",JSON.stringify(val));
        },
        changeAmt(exdata){
            let exkey="";
            let extype="";
            let num=0;
            let amt=0;
            let total_amt=0;
            let total_amt_key="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="num"){
                    num=this.data[this.dataField][exdata][_id];
                }else if(extype_=="amt"){
                    amt=this.data[this.dataField][exdata][_id];
                }else if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            if(total_amt_key){
                total_amt=num*amt;
                let data_=this.data[this.dataField][exdata];
                data_[total_amt_key]=total_amt;
                this.$set(this.data[this.dataField],exdata,data_);
                //this.setData(exdata,total_amt_key,total_amt);

            }

            total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
            if(exkey){
                let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;

                this.$set(this.data[pre],id_,total_amt);
                
                //this.$emit("input",JSON.stringify(data_));

            }
        },
        changeTotalAmt(){

            let total_amt_key="";
            let exkey="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            let total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
           
            if(exkey){
                let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;
                this.$set(this.data[p],id_,total_amt);
                //this.$emit("input",JSON.stringify(data_));

            }
        },
        tableChangeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let exdata=datas.exdata;
            let index=datas.index;
            if(exdata==undefined||exdata=="undefined"){
                datas.exdata=index;
                exdata=index;
            }

            let data_=this.data[this.dataField][exdata];
            data_[id]=val;
            //this.tableDataNew[exdata][id]=val;
            this.$set(this.data[this.dataField],exdata,data_);
            this.changeAmt(exdata);

           /* let data_={};
            data_.pre=this.dataField;
            data_.val=JSON.stringify(this.tableDataNew[exdata]);
            data_.exdata=exdata;
            this.$emit("input",JSON.stringify(data_));*/
        },
        addItem(data){
            /*let data_=JSON.parse(data);
            console.log("addItem========");
            console.log(data_);
            let data__={};
            data__.pre=this.dataField;
            data__.val=data;
            data__.exdata=this.tableDataNew.length;
            data__.type="add";
            console.log(data__);

            //已经存在的项目，则不在添加
            let isOk=true;
            for(let i=0;i<this.tableDataNew.length;i++){
                let keys=this.tableDataNew[i].keys;
                let keys_=data_.keys;
                if(keys==keys_&&keys)
                    isOk=false;
            }
            console.log("isOk===="+isOk)
            if(isOk){
                this.tableDataNew.push(data_);
                
                this.changeAmt(this.tableDataNew.length-1);
                this.$emit("input",JSON.stringify(data__));
            }
            console.log(this.tableDataNew)*/
                

        },
        removeItem(index){
          //  this.tableDataNew.splice(index,1);
            this.$delete(this.data[this.dataField],index);
            this.changeTotalAmt();
           // this.$emit("remove",JSON.stringify(data));
            //console.log(this.tableDataNew)

        },
         removeItemByType(type){
            let index=-1;
            for(let i=0;i<this.data[this.dataField].length;i++){
                let szi_ex7=this.data[this.dataField][i].szi_ex7;
                if(szi_ex7==type){
                    index=i;
                }
            
            }
            
            if(index!=-1){
                this.$delete(this.data[this.dataField],index);
            }
            this.changeTotalAmt();
        },
        removeItemByName(name){
            let index=-1;
            for(let i=0;i<this.data[this.dataField].length;i++){
                let szi_ex1=this.data[this.dataField][i].szi_ex1;
                if(szi_ex1==name){
                    index=i;
                }
            
            }
            
            if(index!=-1){
                this.$delete(this.data[this.dataField],index);
            }
            this.changeTotalAmt();
        },
        getData(){
            return this.data[this.dataField];
        },
        setData(exdata,id,val){
            /*this.tableDataNew[exdata][id]=val;
            let els=this.$refs.inputs;
            if(els){
                for(let i=0;i<els.length;i++){
                    els[i].setData(exdata,id,val);
                }
            }*/
            
        }
    }
}
</script>
<style scoped>
    table{
        width:100%;
        border-collapse: collapse;
    }
    th{
        border:1px solid #409EFF;
        padding:5px;
        background:#409EFF;
        color:#fff;
        
    }
    td{
        border:1px solid #ddd;
    }
    input{
        border:0;
    }
    .tablesss{
        flex:1;
    }
    .el-table{
        flex:1;
    }
    .tableEdit{
        height:100%;
        overflow:hidden;
        display:flex;
        flex-direction: column;
        text-align:left;
    }
    .el-card__body{
        padding-bottom: 0 !important;
    }
</style>